<template>
  <el-container>
    <el-header>   
      <el-input
        v-model="name"
        @blur="getNoticeInfo"
        style="width:400px"
        placeholder="搜索作业信息"
        prefix-icon="el-icon-search"
      ></el-input> 
    </el-header>

    <el-main> 
 
        <el-row>
          <el-col :span="24" v-for="(o, index) in noticeInfo" :key="index" >
            <el-collapse >
              <el-collapse-item :title="o.name" >
                <div><span style="font-weight:bold">作业日期：</span>{{o.field1}}</div>
                <div><span style="font-weight:bold">作业内容：</span>{{o.content}}</div>
                <div><span style="font-weight:bold">发布时间：</span>{{o.ctime}}<span style="float:right;cursor: pointer;color:blue;padding-right:20px" @click="chakn(o)">查看作业</span></div>
              </el-collapse-item> 
            </el-collapse>
          </el-col>
        </el-row> 


      <!--分页-->
      <el-pagination
        style="margin-top: 25px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-main>
   <!-- <el-dialog
      title="添加作业"
      :visible.sync="publishTableVisible"
      width="55%"
      @close="resetPublishForm"
      center
    >
      <el-form :model="publishForm" :rules="publishFormRules" ref="publishForm">
        <el-form-item label="作业名称" label-width="120px" prop="name"> 
                  <el-input v-model="publishForm.name" style="margin-left: 5px;width:100%" 
                            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="作业描述" label-width="120px" prop="uname"> 
                  <el-input v-model="publishForm.uname" style="margin-left: 5px" type="textarea"
                            :rows="2"></el-input>
        </el-form-item> 
        <el-form-item label="作业内容" label-width="120px" prop="content"> 
                  <el-input v-model="publishForm.content" style="margin-left: 5px" type="textarea"
                            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="作业时间" label-width="120px" prop="field1"> 
                  <el-input v-model="publishForm.field1" style="margin-left: 5px" type="textarea"
                            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="题解" label-width="120px" prop="poto"> 
                  <el-input v-model="publishForm.poto" style="margin-left: 5px" type="textarea"
                            :rows="2"></el-input>
        </el-form-item> 
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="publishTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="publishNotice">发 布</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="编辑作业"
      :visible.sync="updateTableVisible"
      width="50%"
      @close="$refs['updateForm'].resetFields()"
      center
    >
      <el-form :model="updateForm" :rules="updateFormRules" ref="updateForm">
        <el-form-item label="作业名称" label-width="120px" prop="name"> 
                  <el-input v-model="updateForm.name" style="margin-left: 5px;width:100%" 
                            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="作业描述" label-width="120px" prop="uname"> 
                  <el-input v-model="updateForm.uname" style="margin-left: 5px" type="textarea"
                            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="输入描述" label-width="120px" prop="tuname"> 
                  <el-input v-model="updateForm.tuname" style="margin-left: 5px" type="textarea"
                            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="输出描述" label-width="120px" prop="content"> 
                  <el-input v-model="updateForm.content" style="margin-left: 5px" type="textarea"
                            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="输入输出样例" label-width="120px" prop="field1"> 
                  <el-input v-model="updateForm.field1" style="margin-left: 5px" type="textarea"
                            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="题解" label-width="120px" prop="poto"> 
                  <el-input v-model="updateForm.poto" style="margin-left: 5px" type="textarea"
                            :rows="2"></el-input>
        </el-form-item> 
        <el-form-item label="正确答案" label-width="120px" prop="field2"> 
                  <el-input v-model="updateForm.field2" style="margin-left: 5px" type="textarea"
                            :rows="2"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="updateTableVisible = false">关 闭</el-button>
        <el-button type="primary" v-if="us=='admin'" @click="updateNotice">更 新</el-button>
      </div>
    </el-dialog> -->

    
    <el-dialog
      :title="''"
      :visible.sync="showlx"
      width="50%"
      @close="$refs['updateForm'].resetFields()"
      center
    >
      <el-form :model="updateForm" :rules="updateFormRules" ref="updateForm"> 
        <div style="margin:10%;margin-top:0">
          <div style="text-align:center;font-size:28px;font-weight:bold">{{updateForm.name}}</div>
          <div style="min-height: 165px;border: 1px solid rgb(239, 239, 239);background-color: #f5f5f5;margin-bottom:5px;margin-top:20px">
            <div style="padding: 10px 0px 10px 10px;border-top: 3px solid rgb(0, 151, 137);background-color: #e9e9e9;color:rgb(0, 151, 137)">作业描述：</div>
            <div style="padding-left:10px">{{updateForm.uname}}</div>
          </div>  
          <div style="min-height: 165px;border: 1px solid rgb(239, 239, 239);background-color: #f5f5f5;margin-bottom:5px">
            <div style="padding: 10px 0px 10px 10px;border-top: 3px solid rgb(0, 151, 137);background-color: #e9e9e9;color:rgb(0, 151, 137)">作业内容：</div>
            <div style="padding-left:10px">{{updateForm.content}}</div>
          </div> 
          <div style="min-height: 75px;border: 1px solid rgb(239, 239, 239);background-color: #f5f5f5;margin-bottom:5px">
            <div style="padding: 10px 0px 10px 10px;border-top: 3px solid rgb(0, 151, 137);background-color: #e9e9e9;color:rgb(0, 151, 137)">作业日期：</div>
            <div style="padding-left:10px">{{updateForm.field1}}</div>
          </div>     
          <div style="min-height: 265px;border: 1px solid rgb(239, 239, 239);background-color: #f5f5f5;margin-bottom:5px">
            <div style="padding: 10px 0px 10px 10px;border-top: 3px solid rgb(0, 151, 137);background-color: #e9e9e9;color:rgb(0, 151, 137)">交作业：</div>
            <div style="padding-left:10px">
              
                  <el-input v-model="daan" style="width:99%;background-color: red" type="textarea" placeholder="请输入"
                            :rows="7"></el-input>
            </div>
          </div>  
        </div>   
      </el-form>

      <div slot="footer" class="dialog-footer"> 
        <!-- <el-button type="warning" v-if="sc" icon="el-icon-star-on"
                    @click="delsc" >已收藏
        </el-button>
        <el-button type="success" v-else icon="el-icon-star-off"
                    @click="shouc" >收藏
        </el-button> -->
        <el-button type="info" v-if="tj" >已提交作业</el-button>
        <el-button type="primary" v-else @click="tjda">提交作业</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
// 导入富文本编辑器
import E from "wangeditor";
import notice from "@/api/notice";
import coll from "@/api/coll";
import utils from "@/utils/utils";

export default {
  name: "NoticeManage",
  data() {
    return {
      name:'',
      //查询学习资料的参数
      queryInfo: {
        noticeContent: "",
        pageNo: 1,
        pageSize: 10,
      },
      daan:'',
      //下拉选择框的数据
      optionInfo: [
        {
          label: "删除",
          desc: "delete",
        },
      ],
      //下拉框所选择的数据
      selected: "",
      // 所有学习资料信息
      noticeInfo: [],
      // 表格数据预加载
      loading: true,
      // 学习资料总数
      total: 0,
      // 被选中的表格行
      selectedInTable: [],
      // 发布学习资料对话框
      publishTableVisible: false,
      // 发布的表单
      publishForm: {
        content: "",
        status: "1",
      },
      publishFormRules: {
        content: [
          {
            required: true,
            message: "请输入学习资料内容",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入 ",
            trigger: "blur",
          },
        ],
      },
      // 发布学习资料的富文本编辑器
      publishEditor: null,
      // 更新学习资料的富文本编辑器
      updateEditor: null,
      // 更新学习资料的对话框是否展示
      updateTableVisible: false,
      // 更新的表单
      updateForm: {
        nid: "",
        content: "",
        status: "",
      },
      updateFormRules: {
        content: [
          {
            required: true,
            message: "请输入学习资料内容",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入 ",
            trigger: "blur",
          },
        ],
      },
      us:'',
      // 当前更新的学习资料的信息
      currentUpdateNoticeStatus: "",
      showlx:false,
      sc:null,
      scid:'',
      tj:null 
    };
  },
  created() {
    this.us = localStorage.getItem("username");
    this.getNoticeInfo();
  },
  methods: {
    shouc(){ 
          coll.addColl({uname:this.us,type:'作业',field1:'bc',dataid:this.updateForm.id}).then((resp) => { 
            if (resp.code === 200) { 
              this.sc = true;
              this.scid = resp.message;
              this.$notify({
                title: "Tips",
                message: '收藏成功', 
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "error",
                duration: 2000,
              });
            } 
          });
    },
    delsc(){

          coll.deleteColl({ ids: this.scid }).then((resp) => {
            debugger;
            if (resp.code === 200) { 
              this.sc = null
              this.$notify({
                title: "Tips",
                message: '已取消收藏', 
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "Tips",
                message: "操作失败",
                type: "error",
                duration: 2000,
              });
            }
          });
    },
    tjda(){
      if(!this.daan){
          this.$notify({
            title: "系统提示",
            message: "请输入内容",
            type: "error",
            duration: 2000,
          });
        return;
      } 
      
      coll.addColl({uname:this.us,type:'提交作业',field1:'bc',content:this.daan,dataid:this.updateForm.id,field2:this.updateForm.field2}).then((resp) => { 
        if (resp.code === 200) { 
          this.showlx = false;
          this.sc = this.curIndex;
          this.scid = resp.message;
          this.$notify({
            title: "Tips",
            message: '提交成功', 
            duration: 2000,
          });
        } else {
          this.$notify({
            title: "Tips",
            message: resp.message,
            type: "error",
            duration: 2000,
          });
        } 
      });
    },
    //获取用户信息
    getNoticeInfo() {
       coll.getColl({type:'作业',pageNo:0,pageSize:999,name:this.name}).then((resp) => {
        if (resp.code === 200) {
          this.noticeInfo = resp.data.data;
          this.total = resp.data.total;
          this.loading = false;
        } else {
          this.$notify({
            title: "Tips",
            message: "获取信息失败",
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    //表格某一行被选中
    handleSelectionChange(val) {
      this.selectedInTable = val;
    },
    //分页插件的大小改变
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.getNoticeInfo();
    },
    //分页插件的页数
    handleCurrentChange(val) {
      this.queryInfo.pageNo = val;
      this.getNoticeInfo();
    },
    //功能下拉框被选择
    selectChange(val) {
      //清空上一次的操作
      this.selected = "";
      //表格中所选中的学习资料的id
      let ids = [];
      this.selectedInTable.map((item) => {
        if (item.status !== 1) {
          // **防止删除当前使用学习资料
          ids.push(item.nid);
        }
      });
      if (val === "delete") {
        //删除
        if (ids.length === 0) {
          this.$message.error("不允许删除当前使用学习资料");
        } else {
          notice.deleteNotice({ ids: ids.join(",") }).then((resp) => {
            if (resp.code === 200) {
              //删除成功后,回调更新数据
              this.getNoticeInfo();
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "success",
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "Tips",
                message: "操作失败",
                type: "error",
                duration: 2000,
              });
            }
          });
        }
      }
    },
    chakn(row){ 
      
      // coll.addColl({uname:this.us,type:'提交作业',field1:'bc',content:this.daan,dataid:this.updateForm.id,field2:this.updateForm.field2}).then((resp) => { 
       coll.getColl({uname:this.us,type:'提交作业',field1:'bc',dataid:row.id,pageNo:0,pageSize:999}).then((resp) => {
        debugger;
        if (resp.code === 200 && resp.data.total>0) {
          this.tj = true;
          this.daan = resp.data.data[0].content
        }  
      });
      this.updateForm=row; 
      this.showlx = true; 

    },
    // 显示发布新闻对话框
    showPublishNoticeDialog() {
      this.publishTableVisible = true;
      // window.setTimeout(() => {
      //   this.createPublishWangEditor();
      // }, 200);
    },
    // 发布学习资料的表单信息重置
    resetPublishForm() {
      //清空表格数据
      this.$refs["publishForm"].resetFields();
    },
    // 创建新增新闻的富文本编辑器
    createPublishWangEditor() {
      if (!this.publishEditor) {
        this.publishEditor = new E("#publishEditor");
        this.publishEditor.create();
      }
      // 设置编辑区域高度为 300px
      this.publishEditor.config.height = 300;
      this.publishEditor.config.onchange = (html) => {
        this.publishForm.content = html;
      };
      this.publishEditor.txt.html(this.publishForm.content);
    },
    // 创建更新新闻的富文本编辑器
    createUpdateWangEditor() {
      if (!this.updateEditor) {
        this.updateEditor = new E("#updateEditor");
        this.updateEditor.create();
      }
      // 设置编辑区域高度为 300px
      this.updateEditor.config.height = 300;
      this.updateEditor.config.onchange = (html) => {
        this.updateForm.content = html;
      };
      this.updateEditor.txt.html(this.updateForm.content);
    },
    // 发布学习资料
    publishNotice() {
      utils.validFormAndInvoke(
        this.$refs["publishForm"],
        () => {
          this.publishForm.type='编程作业';
          coll.addColl(this.publishForm).then((resp) => { 
            if (resp.code === 200) {  
            this.getNoticeInfo();
              this.tmjl = ''; 
              this.$notify({
                title: "Tips",
                message: '提交成功', 
                type:'success',
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "error",
                duration: 2000,
              });
            } 
          });
        },
        "请检查您所填写的信息是否有误"
      );
    },
    // 显示更新学习资料的对话框
    showUpdateNoticeDialog(row) {  
          coll.deleteColl({ ids: row.id }).then((resp) => {
            debugger;
            if (resp.code === 200) {  
            this.getNoticeInfo();
              this.$notify({
                title: "Tips",
                message: '已取消', 
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "Tips",
                message: "操作失败",
                type: "error",
                duration: 2000,
              });
            }
          });
    },
    // 显示更新学习资料的对话框
    showUpdateNoticeDialog2(row) {
      this.updateForm=row; 
      this.updateTableVisible = true; 
    }, 
    // 更新学习资料
    updateNotice() {
      utils.validFormAndInvoke(
        this.$refs["updateForm"],
        () => {
          coll.updateColl(this.updateForm).then((resp) => {
            if (resp.code === 200) {
              this.getNoticeInfo();
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "success",
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "error",
                duration: 2000,
              });
            }
            this.updateTableVisible = false;
          });
        },
        "请检查您所填写的信息是否有误"
      );
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../assets/css/admin/NoticeManage";
</style>
